<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap-5.3.0-dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h2 class="text-center">四大名著</h2>
    <ul class="nav nav-pills nav-justified">
      <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="pill" href="#book1">红楼梦</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="pill" href="#book2">水浒传</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="pill" href="#book3">三国演义</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="pill" href="#book4">西游记</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="book1">
        <h5>《红楼梦》</h5>
        <img src="images/book1.jpg">
      </div>
      <div class="tab-pane" id="book2">
        <h5>《水浒传》</h5>
        <img src="images/book2.png">
      </div>
      <div class="tab-pane" id="book3">
        <h5>《三国演义》</h5>
        <img src="images/book3.png">
      </div>
      <div class="tab-pane" id="book4">
        <h5>《西游记》</h5>
        <img src="images/book4.jpg">
      </div>
    </div>
  </div>
  <script src="bootstrap-5.3.0-dist/js/bootstrap.min.js"></script>
</body>
</html>